<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.memberUser') }}</h2>
        </template>
      </PageTitle>
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="4">
          <el-input v-model="query.nickname" type="text" :placeholder="$t('table.nickname')" />
        </el-col>
        <el-col :span="3">
          <el-input v-model.number="query.id" type="text" :placeholder="$t('table.mid')" />
        </el-col>
        <el-col :span="3">
          <el-input v-model.number="query.pid" type="text" :placeholder="$t('table.pid')" />
        </el-col>
        <el-col :span="5">
          <el-select v-model="query.levelid" :placeholder="$t('table.selectThe')+$t('route.level')" style="width: 100%;" clearable @clear="clearCate">
            <el-option v-for="(item,index) in levelList" :key="index" :label="item.name+'('+item.sub_name+')'" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" border :data="list" max-height="650px" style="margin-top: 20px;">
        <el-table-column label="ID" prop="id" sortable="custom" width="60" />
        <el-table-column :label="$t('table.PName')" prop="p_name">
          <template slot-scope="{row}">
            <div>{{ row.p_name }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.nickname')" prop="nickname" />
        <el-table-column :label="$t('table.portrait')" prop="headimg">
          <template slot-scope="{row}">
            <div class="table-img"><img :src="row.headimg" style="width: 100%;"></div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.platform')" prop="platform" />
        <el-table-column label="手机号" prop="tel" />
        <el-table-column prop="money" :label="$t('table.balance')" />
        <el-table-column prop="score" :label="$t('table.score')" />
        <el-table-column prop="commission" :label="$t('table.commission')" />
        <el-table-column prop="level_name" :label="$t('route.level')" />
        <el-table-column :label="$t('table.creationTime')" prop="createtime" width="180">
          <template slot-scope="{row}">
            {{ row.createtime|timeStanp }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" width="380" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" :disabled="!checkPermission('memberUser-edit')" @click="addOrEidt('edit',row)">{{ $t('button.edit') }}</el-button>
            <el-button icon="el-icon-delete" type="dang er" size="mini" :disabled="!checkPermission('memberUser-del')" @click="delData(row.id)">{{ $t('button.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
      </el-row>
    </div>
    <!-- 添加 -->
    <el-dialog :title="dialogTitle" :visible="showDialog" top="40px" @opened="openDialog" @close="btnCanle">
      <div class="shopOrder-dialog">
        <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="180px">
          <el-form-item :label="$t('table.nickname')" prop="nickname">
            <el-input v-model="formData.nickname" :placeholder="$t('table.enterThe')+' '+$t('table.nickname')" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.portrait')">
            <ImageUpload ref="staffPhoto" />
          </el-form-item>
          <el-form-item :label="$t('table.name')">
            <el-input v-model="formData.realname" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.user_email')" prop="tel">
            <el-input v-model="formData.tel" style="width:50%" />
          </el-form-item>
          <el-form-item label="CPF">
            <el-input v-model="formData.usercard" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.gender')">
            <el-radio v-model="formData.sex" label="0">{{ $t('table.unknown') }}</el-radio>
            <el-radio v-model="formData.sex" label="1">{{ $t('filters.female') }}</el-radio>
            <el-radio v-model="formData.sex" label="2">{{ $t('filters.male') }}</el-radio>
          </el-form-item>
          <el-form-item :label="$t('table.birthday')">
            <el-date-picker
              v-model="formData.birthday"
              type="date"
            />
          </el-form-item>
          <el-form-item :label="$t('route.level')">
            <el-select v-model.number="formData.levelid" :placeholder="$t('table.selectThe')+$t('route.level')">
              <el-option v-for="(item,index) in levelList" :key="index" :label="item.name+'('+item.sub_name+')'" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('table.pid')">
            <el-input v-model.number="formData.pid" style="width:30%" />
          </el-form-item>
          <el-form-item :label="$t('table.pwd')">
            <el-input v-model="formData.pwd" style="width:30%" />
            <label class="tip_ljm">{{ $t('prompt.pwd') }}</label>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanle">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="btnOk">{{ $t('button.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getLevelList, getMemberList, addMember, delMember } from '@/api/user'
export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 10,
        pid: undefined,
        levelid: undefined,
        nickname: '',
        aid: 1,
        id: undefined
      },
      count: 0,
      downloadLoading: false,
      list: [],
      levelList: [],
      dialogTitle: this.$t('button.add'),
      formData: {
        aid: 1,
        id: undefined,
        nickname: '',
        headimg: '',
        sex: '',
        realname: '',
        tel: '',
        usercard: '',
        birthday: '',
        levelid: undefined,
        pid: 0,
        pwd: ''
      },
      rules: {
        nickname: [{ required: true, message: this.$t('table.nickname') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        tel: [{ required: true, message: this.$t('table.user_email') + this.$t('prompt.noEmpty'), trigger: 'blur' }]
      },
      showDialog: false
    }
  },
  created() {
    // 获取userid
    this.getList()
    this.getLevelList()
  },
  methods: {
    // 点击展开新增修改
    addOrEidt(type, row) {
      if (type === 'edit') {
        this.dialogTitle = this.$t('button.edit')
        this.formData.id = row.id
        this.formData.nickname = row.nickname
        this.formData.headimg = row.headimg
        this.formData.sex = row.sex
        this.formData.realname = row.realname
        this.formData.tel = row.tel
        this.formData.usercard = row.usercard
        this.formData.birthday = row.birthday
        this.formData.levelid = row.levelid
        this.formData.pid = row.pid
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      }
    },
    // 获取会员列表
    async getList() {
      this.downloadLoading = true
      const { count, list } = await getMemberList(this.query)
      this.count = count
      this.list = list
      this.downloadLoading = false
    },
    // 获取会员等级列表
    async getLevelList() {
      const data = {
        id: undefined,
        name: '',
        sub_name: '',
        aid: 1,
        page: 1,
        limit: 1000
      }
      const { list } = await getLevelList(data)
      this.levelList = list
    },
    clearCate() {
      this.query.levelid = undefined
    },
    // 点击确定时
    async btnOk() {
      try {
        // 校验整个表单
        await this.$refs.ruleForm.validate()
        // 读取上传组件的数据
        const fileList = this.$refs.staffPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.formData = { ...this.formData, headimg: fileList && fileList.length ? fileList[0].url : '' }
        // 调用新增接口
        await addMember(this.formData)
        // 更新数据
        this.getList()
        this.btnCanle()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 删除管理员
    async delData(e) {
      const data = {
        id: e
      }
      try {
        await this.$confirm(this.$t('prompt.deleteit'))
        await delMember(data)
        this.getList()
        this.$message.success(this.$t('prompt.deletesuccess'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 取消重置原来的数据
    btnCanle() {
      this.formData = {
        aid: 1,
        id: undefined,
        nickname: '',
        headimg: '',
        sex: '',
        realname: '',
        tel: '',
        usercard: '',
        birthday: '',
        levelid: undefined,
        pid: 0,
        pwd: ''
      }
      this.$refs.ruleForm.clearValidate()// 重置校验结果
      this.showDialog = false
    },
    // 给图片赋值
    openDialog() {
      if (this.formData.headimg) {
        this.$refs.staffPhoto.fileList = [{ url: this.formData.headimg, upload: true }]
      }
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getList()
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getList()
    }
  }
}
</script>
<style lang="scss">
.table-img{
  width: 80px;
}
.tip_ljm{
  font-size: 12px;
    color: #999;
    line-height: 22px;
    margin-left: 10px;
}
.shopOrder-dialog{
  height: auto;
  max-height: 750px;
  overflow-y: auto;
  .editor{
    width: 500px;
  }
}
.shopOrder-dialog::-webkit-scrollbar{display:none}
</style>
